<template>
  <div class="container">
    <el-row>
      <el-col :span="8" style="padding-right:10px">
        <el-card class="box-card">
          <div class="user">
            <img src="../assets/images/user.png">
            <div class="user-info">
              <p class="name">Admin</p>
              <p class="access">超级管理员</p>
            </div>
          </div>
          <div class="login-info">
            <p class="last-time">上次登录时间：<span>2021-7-19</span></p>
            <p class="last-time">上次登录地点：<span>郑州</span></p>
          </div>
        </el-card>
        <el-card class="box-card" style="height:458px;margin-top:20px">
            <el-table  style="wight:100%"
            :data="tableData"
            >
            <el-table-column
              prop="name"
              label="商品"
            >
            </el-table-column>
            <el-table-column
              prop="todayBuy"
              label="今日购买"
             >
            </el-table-column>
            <el-table-column
              prop="monthBuy"
              label="本月购买">
            </el-table-column>
            <el-table-column
              prop="totalBuy"
              label="总购买">
            </el-table-column>
          </el-table>
        </el-card>
        
      </el-col>
      <el-col :span="16">
       <div class="num">
          <el-card v-for="item in countData" :key="item.name" :body-style="{display:'flex', padding:0}">
            <i class="icon" :class="`el-icon-${item.icon}`" :style="{background:item.color}"></i>
            <div class="num-info">
              <p class="price">{{item.value}}</p>
              <p class="desc">{{item.name}}</p>
            </div>
          </el-card>
       </div>
      </el-col>
      <el-card style="height:280px">
           <!-- 折线图 -->
            <div ref="echarts1" style="height: 280px"></div>
      </el-card>
      <div class="graph">
        <el-card style="height: 270px">
            <div ref="echarts2" style="height: 260px"></div>
        </el-card>
        <el-card style="height: 270px">
            <div ref="echarts3" style="height: 240px"></div>
        </el-card>
      </div>
    </el-row>
  </div>
</template>
<script>
import{getData} from '../api'
import * as echarts from 'echarts'
export default {
  name: 'homeIndex',
  data() {
    return {
    tableData: [],
        countData: [
        {
          name: "今日支付订单",
          value: 1234,
          icon: "success",
          color: "#2ec7c9",
        },
        {
          name: "今日收藏订单",
          value: 210,
          icon: "star-on",
          color: "#ffb980",
        },
        {
          name: "今日未支付订单",
          value: 1234,
          icon: "s-goods",
          color: "#5ab1ef",
        },
        {
          name: "本月支付订单",
          value: 1234,
          icon: "success",
          color: "#2ec7c9",
        },
        {
          name: "本月收藏订单",
          value: 210,
          icon: "star-on",
          color: "#ffb980",
        },
        {
          name: "本月未支付订单",
          value: 1234,
          icon: "s-goods",
          color: "#5ab1ef",
        },
      ]

    }
  },
  
  mounted(){
           getData().then(({ data }) => {
            const { tableData } = data.data
            console.log(data.data)
            this.tableData = tableData

            // 基于准备好的dom，初始化echarts实例
            const echarts1 = echarts.init(this.$refs.echarts1)
            // 指定图表的配置项和数据
            var echarts1Option = {}
            // 处理数据xAxis
            const { orderData, userData, videoData } = data.data
            const xAxis = Object.keys(orderData.data[0])
            const xAxisData = {
                data: xAxis
            }
            echarts1Option.xAxis = xAxisData
            echarts1Option.yAxis = {}
            echarts1Option.legend = xAxisData
            echarts1Option.series = []
            xAxis.forEach(key => {
                echarts1Option.series.push({
                    name: key,
                    data: orderData.data.map(item => item[key]),
                    type: 'line'
                })
            })
            console.log(echarts1Option)
            // 使用刚指定的配置项和数据显示图表。
            echarts1.setOption(echarts1Option)

            // 柱状图
            const echarts2 = echarts.init(this.$refs.echarts2)
            const eachrts2Option = {
                legend: {
                    // 图例文字颜色
                    textStyle: {
                    color: "#333",
                    },
                },
                grid: {
                    left: "20%",
                },
                // 提示框
                tooltip: {
                    trigger: "axis",
                },
                xAxis: {
                    type: "category", // 类目轴
                    data: userData.map(item => item.date),
                    axisLine: {
                    lineStyle: {
                        color: "#17b3a3",
                    },
                    },
                    axisLabel: {
                    interval: 0,
                    color: "#333",
                    },
                },
                yAxis: [
                    {
                    type: "value",
                    axisLine: {
                        lineStyle: {
                        color: "#17b3a3",
                        },
                    },
                    },
                ],
                color: ["#2ec7c9", "#b6a2de"],
                series: [
                    {
                        name: '新增用户',
                        data: userData.map(item => item.new),
                        type: 'bar'
                    },
                    {
                        name: '活跃用户',
                        data: userData.map(item => item.active),
                        type: 'bar'
                    }
                ],
            }
            echarts2.setOption(eachrts2Option)

            // 饼状图
            const echarts3 = echarts.init(this.$refs.echarts3)
            const eachrts3Option = {
                tooltip: {
                    trigger: "item",
                },
                color: [
                    "#0f78f4",
                    "#dd536b",
                    "#9462e5",
                    "#a6a6a6",
                    "#e1bb22",
                    "#39c362",
                    "#3ed1cf",
                ],
                series: [
                    {
                        data: videoData,
                        type: 'pie'
                    }
                ],
            }
            echarts3.setOption(eachrts3Option)
        })
  }
}
</script>
<style lang="stylus" scoped>
.user
  display: flex
  justify-content: space-around
  align-items: center
  padding-bottom: 20px
  margin-bottom: 20px
  border-bottom: 1px solid  #ccc
  img
    height 150px
    width 150px
    border-radius: 50%
  .user-info
    .name
        font-size: 32px
        margin-bottom: 0
    .access
      color: #999
      margin-top: 0
.login-info
  .last-time
    line-height: 28px
    font-size: 14px
    color: #999
    span
      color: #666
      margin-left: 20px
.num
  display: flex
  flex-wrap: wrap
  justify-content: space-between
  margin-bottom: 10px
  .el-card
    padding: 0
    width: 32%
    margin-bottom: 10px
  .icon
    width 80px
    height 80px
    color: #fff
    font-size: 30px
    text-align: center
    line-height: 80px
  .num-info
    display: flex
    flex-direction: column
    justify-content: center
    margin-left: 15px
    .price
      font-size: 24px
      margin-bottom: 10px
    .desc
      font-size: 14px
      color: #999
.graph
  margin-top: 20px
  display: flex
  justify-content: space-between
  .el-card
    width: 48%
    height 280px
</style>
